<?php
/**
 * Created by PhpStorm.
 * User: HGQ
 * Date: 16/3/1
 * Time: 上午11:35
 */
use yii\helpers\Url;

$web = Url::to("@web");
?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>朵拉盒</title>
    <link type="text/css" href="<?= $web ?>/css/wx-good/goods-list.css" rel="stylesheet"/>
    <link type="text/css" href="<?= $web ?>/css/wx-good/global.css" rel="stylesheet"/>

    <script type="text/javascript" src="<?= $web ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $web ?>/js/tools.js"></script>

    <script type="application/javascript">
        $(document).ready(function () {

            var w = $(window).width();
            if (w > 640) {
                w = 640;
            }
            $("html").css("font-size", w * 20 / 320);

            goods_tpl = returnstring("<?=$web?>/js/wx-good/goods-list-goods.tpl");

            loadGoodsList(false);

            $(document).scroll(function () {
                var scrollTop = $(document).scrollTop();
                var scrollHeight = $(window).height();
                var contentHeight = $(document).height();
                if (scrollTop + scrollHeight >= contentHeight) {
                    loadGoodsList(false);
                }
            });
        });


        var start = 0;
        var pagesize = 6;
        var goods_tpl = "";
        function href_goods_detail(goods_code) {
            goods_code = encodeURI(goods_code);
            window.location.href = "<?=Url::to(["wx-good/goods-detail"]);?>?goods_code=" + goods_code;
        }

        var isCompleted = false;
        var isLoading = false;
        function loadGoodsList(isClear) {
            if (isLoading == true) {
                return;
            }
//            $("#loading_toast").show();
            if (isClear) {
                start = 0;
                isCompleted = false;
            } else {
                if (isCompleted == true) {
                    return;
                }
            }
            var data = {};
            data.start = start;
            data.pagesize = pagesize;
            data.filter = 0;
            data.category = '0';
            data.order = order;
            isLoading = true;
            requestJson("<?=Url::to(['wx-good/get-goods-list-handle'])?>", data, true, function (response) {
                if (response.status == 0) {
                    var target = $(".commodity-search");
                    if (isClear) {
                        target.empty();
                    }

                    $.each(response.data.goodsList, function (i, item) {
                        var dom = document.createElement("DIV");
                        dom.innerHTML = goods_tpl._format({
                            code: item.GOODS_CODE,
                            type: item.TYPE,
                            name: item.GOODS_NAME,
                            pic: item.image_url == '' ? "<?= $web ?>/img/wx-good/goods-default.jpg" : item.GOODS_IMG_URL,
                            price: item.PRICE,
                            action: item.TYPE == '1' ? '添加购物车' : '直接购买'
                        });
                        target.get(0).appendChild(dom);
                        $(".commodity-integral img").attr('src', '<?= $web ?>/img/wx-good/commodity-1.png');
                        $(".commodity-car img").attr('src', '<?= $web ?>/img/wx-good/commodity-2.png');
                    });
                    start = start + response.data.goodsList.length;
                    if (response.data.goodsList.length == 0) {
                        isCompleted = true;
                    }
                } else {
                    alert(response.message);
                }

                isLoading = false;
            });
        }

        var order = 0;
        function changeOrder() {
            //0:不排序 1:升序 2:降序
            if (order == 0 || order == 2) {
                order = 1;
            } else if (order == 1) {
                order = 2;
            }
            loadGoodsList(true);
        }

        function href_goods_query() {
            window.location.href = "<?=Url::to(["wx-good/goods-query"]);?>";
        }

        function addShoppingCart(goods_code, type) {
            if (type == 1) {
                $("#loading_toast").show();

                var data = {};
                data.goods_code = goods_code;
                requestJson('<?=Url::to(['wx-good/add-goods-to-cart-handle'])?>', data, true, function (response) {
                    $("#loading_toast").hide();

                    if (response.status == 0) {
                        if (response.data.TOTALNUM > 99) {
                            $('#v_TOTALNUM').html('99+');
                        } else {
                            $('#v_TOTALNUM').html(response.data.TOTALNUM);
                        }
                    } else {
                        alert(response.message);
                    }
                });
            } else if (type == 2) {
                window.location.href = "<?=Url::to(["wx-good/create-virtual-goods-to-order-handle"]);?>?goods_code=" + goods_code;
            }
        }

        function href_cart() {
            window.location.href = "<?=Url::to(["wx-good/shopping-cart"]);?>";
        }
        function href_goods_category() {
            window.location.href = "<?=Url::to(["wx-good/goods-category"]);?>";
        }
    </script>
    <style type="text/css">


        .middle-search {
            background-image: url("<?= $web ?>/img/wx-good/welfare-platform-1.png");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<div class="main" style="width: 16rem; margin: 0 auto;">
    <!-- <div class="head">
         <img class="head-radius-big"
              src="">
         <div class="head-hr-middle"></div>
         <div class="head-radius-small">
             <img src=""
                  style="width: 1.6rem; height: 1.6rem;">
         </div>
         <div class="head-hr-middle"></div>
         <div class="head-user">
             <div class="head-user-words">欢迎您</div>
             <div class="head-user-integral">您共有&nbsp;<span>0</span>&nbsp;积分</div>
         </div>
     </div>-->
    <div class="hr"></div>
    <div class="middle">
        <div class="middle-hr-one"></div>
        <div class="middle-search">
            <input type="text" placeholder="搜索全部商品" onclick="href_goods_query()" style="width: 4.5rem; height: 0.9rem;
              float: left; margin-left: 1.9rem; margin-top: 0.3rem; border: none;
              ">
        </div>
        <div class="middle-hr-tow"></div>
        <div class="middle-radius" onclick="changeOrder()">
            <img src="<?= $web ?>/img/wx-good/welfare-platform-2.png"
                 style="width: 1.7rem;height: 1.7rem;">
        </div>
        <div class="middle-hr-three"></div>
        <div class="middle-radius" onclick="href_goods_category();">
            <img src="<?= $web ?>/img/wx-good/welfare-platform-3.png"
                 style="width: 1.7rem;height: 1.7rem;">
        </div>
        <div class="middle-hr-three"></div>
        <div class="middle-radius" onclick="href_cart()">
            <span id="v_TOTALNUM"><?php if ($TOTALNUM > 99) echo '99+'; else echo $TOTALNUM; ?></span>
            <img src="<?= $web ?>/img/wx-good/welfare-platform-4.png"
                 style="width: 1.7rem;height: 1.7rem;">
        </div>
        <div class="middle-hr-three"></div>
    </div>
    <div class="hr"></div>
    <div class="commodity-search">
        <!--<div class="commodity">
            <div class="commodity-img">
                <img src="imgs/order-5.png" style="width: 3rem; height: 3rem;">
            </div>
            <div class="commodity-right">
                <div class="commodity-name">
                    雅图银兴梦银兴梦银兴梦空间国际影院电影票电影票电影票电影票电影票电影票电影票
                </div>
                <div class="commodity-label">
                    <div class="commodity-integral">积分&nbsp;<span>10.5</span></div>
                    <div class="commodity-car">
                        添加到购物车
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</div>
<!-- loading toast -->
<div id="loading_toast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">数据加载中</p>
    </div>
</div>
<!-- end loading toast -->
</body>
</html>